<template>
  <view class="add-goods">
    <u-form :model="form" ref="goodsForm" label-width="160">
      <view class="form-title">基本信息</view>
      <view class="form-cont">
        <u-form-item required label="商品相册" label-position="top"
          ><upload
            :images="form.images"
            @handleRemove="imgRemove"
            @uploadSuccess="uploadSuccess"
        /></u-form-item>
        <u-form-item required label="商品名称"
          ><u-input input-align="right" v-model="form.title"
        /></u-form-item>
        <u-form-item required label="商品分类">
          <view class="form-main" @click="openSel('cate_show')">
            <text v-if="category_name">{{ category_name }}</text>
            <text class="input-pl" v-else>请选择商品分类</text>
          </view>
          <view slot="right"
            ><u-icon name="arrow-down-fill" size="24"></u-icon
          ></view>
        </u-form-item>
        <u-form-item label="商品品牌">
          <view class="form-main" @click="goPage('/pagesT/brand/selBrand')">
            <text v-if="brand_name">{{ brand_name }}</text>
            <text class="input-pl" v-else>请选择品牌</text>
          </view>
          <view slot="right"
            ><u-icon name="arrow-down-fill" size="24"></u-icon
          ></view>
        </u-form-item>
        <u-form-item label="商品卖点"
          ><u-input input-align="right" v-model="form.describe"
        /></u-form-item>
        <u-form-item label="抄码商品">
          <view class="form-value">
            <u-switch
              style="transform: translateY(14rpx)"
              @change="switchChange"
              v-model="isEq"
              :active-value="5"
              :inactive-value="4"
              size="40"
            ></u-switch>
          </view>
        </u-form-item>
        <u-form-item label="负库存销售">
          <view class="form-value">
            <u-switch
              style="transform: translateY(14rpx)"
              @change="distributionChange"
              v-model="isDistribution"
              :active-value="5"
              :inactive-value="4"
              size="40"
            ></u-switch>
          </view>
        </u-form-item>
        <u-form-item label="是否上架">
          <view class="form-value">
            <u-switch
              style="transform: translateY(14rpx)"
              @change="enableStatusChange"
              v-model="enableStatus"
              :active-value="5"
              :inactive-value="4"
              size="40"
            ></u-switch>
          </view>
        </u-form-item>
        <u-form-item label="保质期">
          <u-input input-align="right" v-model="form.expireTime" />
          <view slot="right">天</view>
        </u-form-item>
        <u-form-item label="关键词" label-position="top">
          <view class="top-value">
            <u-tag
              class="tag-li"
              v-for="(item, index) in form.tag"
              :key="index"
              :text="item"
              closeable
              type="primary"
              @close="deletTag(index)"
            />
            <u-button size="mini" @click="openSel('tag_show')">
              <u-icon name="plus" margin-right="20" color="#fb5904"></u-icon>
              新增
            </u-button>
          </view>
        </u-form-item>
      </view>
      <view class="form-title">规格明细</view>
      <view class="form-cont">
        <u-form-item required label="基本单位">
          <view class="form-main" @click="openSel('m_unit_show')">
            <text v-if="master_unit">{{ master_unit }}</text>
            <text class="input-pl" v-else>请选择基本单位</text>
          </view>
          <view slot="right"
            ><u-icon name="arrow-down-fill" size="24"></u-icon
          ></view>
        </u-form-item>
        <u-form-item label="辅助单位" label-position="top">
          <view class="top-value">
            <block v-for="(item, index) in form.unitData" :key="index">
              <u-tag
                class="tag-li"
                v-if="item.isMaster === 4"
                :text="
                  '1' + item.unitName + '=' + item.conversion + master_unit
                "
                :closeable="isEditSpec === 5 || isEq"
                type="primary"
                @close="deletUnit(index, item.unitName)"
              />
            </block>
            <u-button
              v-if="!isEq || (isEq && form.unitData.length < 1)"
              size="mini"
              @click="openSel('unit_show')"
            >
              <u-icon name="plus" margin-right="20" color="#fb5904"></u-icon>
              新增
            </u-button>
          </view>
        </u-form-item>
        <u-form-item label="商品规格">
          <view
            @click="editSku"
            slot="right"
            style="font-size: 28rpx; color: #fb5904"
          >
            <u-icon name="edit-pen" size="28"></u-icon>
            <text style="margin-left: 10rpx">编辑</text>
          </view>
        </u-form-item>
      </view>
      <view class="form-title">物流设置</view>
      <view class="form-cont">
        <u-form-item label="快递运费">
          <view class="form-main" @click="openSel('expressType_show')">
            <text v-if="expressType_name">{{ expressType_name }}</text>
            <text class="input-pl" v-else>请选择</text>
          </view>
          <view slot="right"
            ><u-icon name="arrow-down-fill" size="24"></u-icon
          ></view>
        </u-form-item>
        <u-form-item label="运费模版" v-if="form.expressType === 2">
          <view class="form-main" @click="openSel('template_show')">
            <text v-if="template_name">{{ template_name }}</text>
            <text class="input-pl" v-else>请选择</text>
          </view>
          <view slot="right"
            ><u-icon name="arrow-down-fill" size="24"></u-icon
          ></view>
        </u-form-item>
        <u-form-item label="统一运费" v-if="form.expressType === 3">
          <u-input input-align="right" v-model="form.expressFee" />
          <view slot="right">元</view>
        </u-form-item>
      </view>
      <view class="form-title">商品详情</view>
      <view class="form-cont"
        ><editorW :html="form.description" @editInput="editInput"></editorW
      ></view>
    </u-form>
    <view class="submit-btn"
      ><u-button
        class="handel-btn"
        @click="submit"
        :loading="sub_load"
        :ripple="true"
        type="primary"
        >提交发布</u-button
      ></view
    >
    <u-popup v-model="tag_show" border-radius="10" mode="center">
      <view class="pop-model">
        <view class="pop-tit">新增关键词</view>
        <input
          :focus="true"
          type="text"
          confirm-type="done"
          @confirm="tagConfirm"
          placeholder-class="input-pl"
          placeholder="请输入"
          v-model="tag_key"
        />
        <u-button type="primary" size="medium" @click="tagConfirm"
          >确定</u-button
        >
      </view>
    </u-popup>
    <u-popup v-model="unit_show" mode="center" border-radius="10">
      <view class="pop-model">
        <view class="pop-tit">新增辅助单位</view>
        <view class="unit-model-main">
          <text>1</text>
          <view class="sel-view" @click="openSel('fz_unit_show')">
            <text v-if="pop_unit_obj.label">{{ pop_unit_obj.label }}</text>
            <text class="input-pl" v-else>请选择</text>
          </view>
          =
          <input class="uni-num-input" type="digit" v-model="conversion" />
          <text>{{ master_unit }}</text>
        </view>
        <view class="confirm-btn" @click="unitPopConfirm">确定</view>
      </view>
    </u-popup>
    <tki-tree
      ref="tkitree"
      :selectParent="true"
      :range="cate_list"
      rangeKey="title"
      @confirm="cateConfirm"
    ></tki-tree>
    <u-select
      v-model="m_unit_show"
      mode="single-column"
      value-name="id"
      label-name="unitName"
      :list="unit_options"
      @confirm="unitConfirm"
    ></u-select>
    <u-select
      z-index="10080"
      v-model="fz_unit_show"
      mode="single-column"
      value-name="id"
      label-name="unitName"
      :list="unit_options"
      @confirm="unitPopSelConfirm"
    ></u-select>
    <u-select
      v-model="expressType_show"
      @confirm="expressTypeConfirm"
      :list="expressType_list"
    ></u-select>
    <!-- 运费模版 -->
    <u-select
      v-model="template_show"
      @confirm="templateConfirm"
      label-name="title"
      value-name="id"
      :list="express_list"
    ></u-select>
  </view>
</template>

<script>
import editorW from "@/components/editor/editor.vue";
import upload from "@/components/qiniu/QiniuUpload.vue";
import tkiTree from "@/components/tki-tree/tki-tree.vue";
const priceDataLi = {
  conversion: 0,
  unitName: "",
  unitId: 0,
  isMaster: 5,
  enabledLadder: 0,
  salePriceAreaType: 1,
  salePrice: 0,
  ladderPrice: [],
  marketPrice: 0,
  memberPrice: "",
  setNum: 1,
  specImage: "",
  barCode: "",
  weight: "",
};
export default {
  components: { editorW, upload, tkiTree },
  data() {
    return {
      sub_load: false,
      express_list: [],
      expressType_show: false,
      template_show: false,
      expressType_name: "包邮",
      isEq: false,
      isDistribution: false,
      enableStatus: true,
      shopData: "",
      conversion: "", //辅助单位换算比例
      master_unit: "", //基本单位
      pop_unit_obj: {}, // 弹窗辅助单位
      tag_show: false, //新增关键词弹窗
      tag_key: "", // 新增关键词
      brandData: {}, //品牌数据
      brand_name: "", //品牌名称
      category_name: "", //分类名称
      unit_options: [], //计量单位
      copy_unit_options: [], //计量单位
      expressType_list: [
        {
          label: "包邮",
          value: 1,
        },
        {
          label: "运费模版",
          value: 2,
        },
        {
          label: "统一运费",
          value: 3,
        },
      ],
      unit_show: false, // 新增辅助弹窗
      cate_show: false, // 商品分类弹窗
      m_unit_show: false, // 单位弹窗
      fz_unit_show: false,
      brand_list: [],
      cate_list: [],
      isEditSpec: 5, // 5 表示此商品从未采购过，允许用户随意编辑单位和属性；4 表示商品已经采购过，隐藏添加属性按钮，避免skuid重组
      form: {
        merchantId: "",
        assistCategoryPath: [],
        assistCategoryId: "",
        delUnitIds: [],
        delSpecSkuIds: [],
        createUserName: "",
        isDistribution: "",
        isShield: "",
        deliverySupIds: "",
        expressType: "", //运费模版
        expressFee: "", // 统一运费
        showExpress: "",
        ruleId: "",
        notArea: [],
        notCustomerType: "",
        notCustomer: "",
        title: "", //商品名称
        storage: "", //货架编码
        specType: 1, // 是否启用多规格 1单规格 2多规格
        specGroup: [], //多规格数据
        specMultiple: [], //多规格明细
        unitData: [], //计量单位
        describe: "", //商品卖点
        code: "", //商品code
        barCode: "", //商品条码
        weight: "", //商品重量
        categoryId: "", //分类ID
        categoryPath: "", //分类路径
        expireTime: "", //保质期
        brandId: "", //品牌ID
        tag: [], //关键词
        description: "", //商品详情
        noSalesShop: "", //不销售店铺ID
        images: [], //商品图片
        enableStatus: 5, //是否上架
        isStore: false, //是否是商户后台上传商品
        isEq: 4, //超码商品 4否 5是
      },
    };
  },
  watch: {
    brandData(val) {
      if (val.id) {
        this.form.brandId = val.id;
        this.brand_name = val.title;
      }
    },
  },
  onLoad(options) {
    this.getAllExpressRule();
    if (options.id) {
      this.goods_id = options.id;
      this.getQuickGoodsInfo();
      uni.setNavigationBarTitle({
        title: "编辑商品",
      });
    }
    this.getAllCategory();
    this.getAllUnit();
  },
  methods: {
    //抄码商品
    switchChange(val) {
      this.form.isEq = val;
    },
    // 负库存销售
    distributionChange(val) {
      this.form.isDistribution = val;
    },
    // 是否上架
    enableStatusChange(val) {
      this.form.enableStatus = val;
    },
    templateConfirm(arr) {
      this.template_name = arr[0].label;
      this.form.ruleId = arr[0].value;
    },
    expressTypeConfirm(arr) {
      this.expressType_name = arr[0].label;
      this.form.expressType = arr[0].value;
    },
    //运费模版
    getAllExpressRule() {
      this.$u.api.getAllExpressRule().then((res) => {
        this.express_list = res.data;
      });
    },
    cateConfirm(arr) {
      this.category_name = arr[0].title;
      this.form.categoryId = arr[0].id;
      if (arr[0].parents.length) {
        this.form.categoryPath =
          arr[0].parents.map((item) => item.id).join(",") + "," + arr[0].id;
      } else {
        this.form.categoryPath = arr[0].id;
      }
    },
    editInput(val) {
      this.form.description = val;
    },
    // 获取商品详情
    getQuickGoodsInfo() {
      this.$u.api.getQuickGoodsInfo(this.goods_id).then((res) => {
        const data = res.data;
        this.category_name = data.categoryName;
        this.brand_name = data.brandName;
        this.isDistribution = data.isDistribution === 5;
        this.isEq = data.isEq === 5;
        this.enableStatus = data.enableStatus === 5;
        this.master_unit = data.unitData.find(
          (item) => item.isMaster === 5
        ).unitName;
        const expressTypeData = this.expressType_list.find(
          (item) => item.value === data.expressType
        );
        this.expressType_name = expressTypeData ? expressTypeData.label : "";
        if (data.expressType === 2) {
          this.template_name = this.express_list.find(
            (item) => item.id === data.ruleId
          ).title;
        }
        this.form = {
          basicGoodsId: data.basicGoodsId,
          merchantId: data.merchantId,
          assistCategoryPath: data.assistCategoryPath,
          assistCategoryId: data.assistCategoryId,
          delUnitIds: data.delUnitIds,
          delSpecSkuIds: data.delSpecSkuIds,
          createUserName: data.createUserName,
          isDistribution: data.isDistribution,
          isShield: data.isShield,
          deliverySupIds: data.deliverySupIds,
          expressType: data.expressType,
          expressFee: data.expressFee,
          showExpress: data.showExpress,
          ruleId: data.ruleId,
          notArea: data.notArea,
          notCustomerType: data.notCustomerType,
          notCustomer: data.notCustomer,
          title: data.title,
          storage: data.storage,
          specType: data.specType,
          specGroup: data.specGroup,
          specMultiple: data.specMultiple,
          unitData: data.unitData.map((item) => {
            return {
              id: item.id,
              unitName: item.unitName,
              isMaster: item.isMaster,
              unitId: item.unitId,
              conversion: item.conversion || 0,
            };
          }),
          describe: data.describe,
          code: data.code,
          barCode: data.barCode,
          weight: data.weight,
          categoryId: data.categoryId,
          categoryPath: data.categoryPath,
          expireTime: data.expireTime,
          brandId: data.brandId,
          tag: data.tag.filter((item) => !!item),
          description: data.description,
          noSalesShop: data.noSalesShop,
          images: data.images,
          enableStatus: data.enableStatus,
          isStore: data.isStore,
          isEq: data.isEq,
        };
        console.log(this.form);
      });
    },
    //基本单位选择
    unitConfirm(arr) {
      // 检查辅助单位是否包含当前选择的单位
      const isFu = this.form.unitData.find(
        (item) => item.unitName === arr[0].label
      );
      if (!!isFu) {
        this.$u.toast("基本单位不能与辅助单位用同一个");
        return;
      }

      this.master_unit = arr[0].label;
      const index = this.form.unitData.findIndex((item) => item.isMaster === 5);

      const unit = {
        isMaster: 5,
        isDefault: 5,
        isNew: 5,
        specType: 1,
        barCode: "",
        weight: "",
        unitName: arr[0].label,
        unitId: arr[0].value,
      };
      if (index === -1) {
        this.form.unitData.push(unit);
      } else {
        this.form.unitData[index] = {
          ...this.form.unitData[index],
          ...unit,
        };
      }

      const skuIndex = this.form.specMultiple.findIndex(
        (item) => item.isMaster === 5
      );
      if (skuIndex > -1) {
        this.form.specMultiple[skuIndex].unitId = arr[0].value;
        this.form.specMultiple[skuIndex].unitName = arr[0].label;
        this.form.specMultiple[skuIndex].salePrice = {
          ...this.form.specMultiple[skuIndex].salePrice,
          unitName: arr[0].label,
          unitId: arr[0].value,
        };
      }
    },
    editSku() {
      if (!this.master_unit) {
        this.$u.toast("请先选择基本单位");
        return;
      }
      let obj = [];
      if (this.form.specMultiple.length) {
        obj = this.form.specMultiple;
      } else {
        obj = this.form.unitData;
      }
      // console.log(obj)
      // console.log(this.form.specType);
      // return
      if (this.form.specType === 1) {
        this.goPage(
          "/pagesB/goods/SkuOneStore?specType=" +
            this.form.specType +
            "&unitData=" +
            JSON.stringify(obj)
        );
      } else {
        this.goPage(
          "/pagesB/goods/SkuOneStore?specType=" +
            this.form.specType +
            "&unitData=" +
            JSON.stringify(this.form.unitData) +
            "&specMultiple=" +
            JSON.stringify(this.form.specMultiple) +
            "&specGroup=" +
            JSON.stringify(this.form.specGroup)
        );
      }
    },
    openSel(key) {
      if (key === "unit_show") {
        if (!this.master_unit) {
          this.$u.toast("请先选择基本单位");
          return;
        }
      } else if (key === "cate_show") {
        this.$refs.tkitree._show();
        return;
      } else if (key === "m_unit_show") {
        if (this.isEditSpec === 4) {
          return;
        }
        // 抄码商品主单位只能选择KG
        if (this.isEq) {
          this.unit_options = this.copy_unit_options.filter(
            (item) => item.unitName === "KG"
          );
        } else {
          this.unit_options = this.$u.deepClone(this.copy_unit_options);
        }
      } else if (key === "fz_unit_show") {
        if (this.isEq) {
          this.unit_options = this.copy_unit_options.filter(
            (item) => item.unitName === "件"
          );
        } else {
          this.unit_options = this.$u.deepClone(this.copy_unit_options);
        }
      }
      this[key] = true;
    },
    // 新增关键词确定
    tagConfirm() {
      this.tag_show = false;
      this.form.tag.push(this.tag_key);
      this.tag_key = "";
    },
    deletTag(index) {
      this.form.tag.splice(index, 1);
    },
    deletShop(index) {
      this.no_sales_shop.splice(index, 1);
    },
    // 图片上传成功
    uploadSuccess(imgUrl) {
      this.form.images.push(imgUrl);
    },
    //移除图片
    imgRemove(arr) {
      this.form.images = arr;
    },
    //  获取所有商品分类
    getAllCategory() {
      this.$u.api
        .getAllCategory({
          enableStatus: 5,
        })
        .then((res) => {
          this.cate_list = res.data;
        });
    },
    reduceCate(list) {
      list.forEach((item) => {
        if (!item.children) {
          item.children = [
            {
              id: "",
              title: "全部",
            },
          ];
        } else {
          item.children = this.reduceCate(item.children);
        }
      });
      return list;
    },
    getAllUnit() {
      this.$u.api
        .getAllUnit({
          page: 1,
          pageSize: 99,
        })
        .then((res) => {
          // 备份一份单位数据
          this.copy_unit_options = this.$u.deepClone(res.data);
          this.unit_options = res.data;
        });
    },
    // 辅助单位选择
    unitPopSelConfirm(arr) {
      if (arr[0].label === this.master_unit) {
        this.$u.toast("辅助单位不能与基本单位用同一个");
        return;
      }
      const index = this.form.unitData.findIndex(
        (item) => item.unitName === arr[0].label
      );
      if (index > -1) {
        this.$u.toast("该单位已被选择");
        return;
      }
      this.pop_unit_obj = arr[0];
    },
    // 辅助单位确定
    unitPopConfirm() {
      if (!this.conversion) {
        this.$u.toast("请输入换算比例");
        return;
      }
      this.form.unitData.push({
        unitName: this.pop_unit_obj.label,
        isMaster: 4,
        unitId: this.pop_unit_obj.value,
        conversion: this.conversion,
      });
      if (this.form.specType === 1) {
        this.form.specMultiple = this.form.unitData.map((item) => {
          return {
            unitName: item.unitName,
            isMaster: item.isMaster,
            isSale: 5,
            isDefault: 4,
            unitId: item.unitId,
            conversion: item.conversion || 0,
            specImage: "",
            specGroup: [],
            salePrice: {
              unitName: item.unitName,
              isMaster: item.isMaster,
              unitId: item.unitId,
              conversion: item.conversion || 0,
              deleteStatus: 4,
              enabledLadder: 0,
              salePriceAreaType: 1,
              salePrice: 0,
              ladderPrice: [],
              marketPrice: 0,
              memberPrice: "",
              setNum: 1,
            },
          };
        });
      } else {
        const skuArr = this.form.specMultiple.filter(
          (item) => item.isMaster === 5
        );
        const fuskuArr = skuArr.map((item) => {
          return {
            unitName: this.pop_unit_obj.label,
            isMaster: 4,
            isSale: 5,
            isDefault: 4,
            unitId: this.pop_unit_obj.value,
            conversion: this.conversion,
            specImage: "",
            specGroup: item.specGroup,
            salePrice: {
              unitName: this.pop_unit_obj.label,
              isMaster: 4,
              unitId: this.pop_unit_obj.value,
              conversion: this.conversion,
              deleteStatus: 4,
              enabledLadder: 0,
              salePriceAreaType: 1,
              salePrice: 0,
              ladderPrice: [],
              marketPrice: 0,
              memberPrice: "",
              setNum: 1,
            },
          };
        });
        this.form.specMultiple = this.form.specMultiple.concat(fuskuArr);
      }

      // 重置弹窗数据
      this.unit_show = false;
      this.conversion = "";
      this.pop_unit_obj = {};
    },
    deletUnit(index, unitName) {
      this.form.unitData.splice(index, 1);
      this.form.specMultiple.forEach((item, index) => {
        if (item.unitName === unitName) {
          this.form.specMultiple.splice(index, 1);
        }
      });
    },
    submit() {
      if (!this.form.images.length) {
        this.$u.toast("请至少选择一张商品图片");
        return;
      }
      if (!this.form.title) {
        this.$u.toast("请输入商品名称");
        return;
      }
      if (!this.form.categoryId) {
        this.$u.toast("请选择商品分类");
        return;
      }
      if (!this.form.unitData.length) {
        this.$u.toast("请选择基本单位");
        return;
      }
      if (!this.form.specMultiple || !this.form.specMultiple.length) {
        this.$u.toast("请编辑商品规格");
        return;
      }
      // 检查规格里面的销售价是不是为0
      let isSalePrice = true;
      for (let i in this.form.specMultiple) {
        let item = this.form.specMultiple[i];
        if (!item.salePrice.salePrice || item.salePrice.salePrice <= 0) {
          const skuName = item.specGroup
            .map((sku) => sku.specValueName)
            .join(";");
          this.$u.toast(
            `规格【${item.unitName + ";" + skuName}】的销售价必须大于0`
          );
          isSalePrice = false;
          break;
        }
      }
      if (!isSalePrice) {
        return;
      }
      // 编辑页面清楚ID
      this.form.specMultiple.map((item) => {
        if (item.id) {
          delete item.id;
        }
        return item;
      });
      // 做延迟处理是为了获取富文本框中的值
      setTimeout(() => {
        this.sub_load = true;
        if (this.goods_id) {
          this.$u.api
            .editQuickGoods({
              ...this.form,
              id: this.goods_id,
              tag: this.form.tag ? this.form.tag.join(",") : "",
            })
            .then((res) => {
              this.sub_load = false;
              this.$u.toast("修改成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 2000);
            })
            .catch((err) => {
              this.sub_load = false;
            });
        } else {
          this.$u.api
            .addBasicAndPublishGoods({
              ...this.form,
              tag: this.form.tag ? this.form.tag.join(",") : "",
            })
            .then((res) => {
              this.sub_load = false;
              this.$u.toast("新增成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 2000);
            })
            .catch((err) => {
              this.sub_load = false;
            });
        }
      }, 200);
    },
  },
};
</script>

<style scoped lang="scss">
.add-goods {
  padding-bottom: 120rpx;
  .form-title {
    line-height: 90rpx;
    font-weight: 700;
    padding: 0 24rpx;
  }
  .form-cont {
    padding: 0 24rpx;
    background-color: #ffffff;
    .form-value {
      text-align: right;
      width: 100%;
    }
    .top-value {
      text-align: left;
      width: 100%;
    }
    .form-main {
      text-align: right;
      .input-pl {
        color: #c0c4cc;
        font-size: 28rpx;
      }
    }
  }
}
.pop-model {
  padding: 0 30rpx 20rpx;
  text-align: center;
  input {
    border: 1px solid #f5f5f5;
    line-height: 70rpx;
    height: 70rpx;
    margin-bottom: 20rpx;
  }
  .pop-tit {
    line-height: 70rpx;
  }
  .confirm-btn {
    width: 80%;
    display: block;
    background-color: $uni-color-primary;
    text-align: center;
    color: #ffffff;
    line-height: 70rpx;
    height: 70rpx;
    border-radius: 10rpx;
    margin: 0 auto;
  }
  .unit-model-main {
    margin-bottom: 30rpx;
    margin-top: 10rpx;
    width: 600rpx;
    line-height: 70rpx;
    input {
      display: inline-block;
      vertical-align: middle;
      width: 200rpx;
      margin: 0 10rpx;
    }
    .sel-view {
      margin: 0 10rpx;
      display: inline-block;
      vertical-align: middle;
      width: 200rpx;
      height: 70rpx;
      border: 1px solid #f5f5f5;
    }
  }
}
.tag-li {
  margin-right: 20rpx;
}
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
